<template>
	<view>
		<!-- 登录个人信息 -->
		<view class="userinfo">
			<!-- <block v-if="canIUseOpenData"> -->
				<view class="userinfo-avatar" :bindtap="bindViewTap">
					<open-data class="myself" type="userAvatarUrl"></open-data>
				</view>
				<!-- <view style="width: 100%;text-align: center;"> -->
					<open-data type="userNickName"></open-data>
				<!-- </view> -->
				
			<!-- </block> -->
			<!-- <block v-else-if="!hasUserInfo">
				<button v-if="canIUseGetUserProfile" :bindtap="getUserProfile"> 获取头像昵称 </button>
				<button v-else-if="canIUse" open-type="getUserInfo" :bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
				<view v-else> 请使用1.4.4及以上版本基础库 </view>
			</block>
			<block v-else>
				<image :bindtap="bindViewTap" class="userinfo-avatar" :src="userInfo.avatarUrl" mode="cover"></image>
				<text class="userinfo-nickname">{{userInfo.nickName}}</text>
			</block> -->
		</view>
		<!-- 我的订单 -->
		    <view style="border: rgb(176, 171, 177) 1rpx solid;width: 100%;height: 100rpx;background-color: rgb(247, 245, 242);">
		        <block>
		            <view style="width: 150rpx;height: 100%;display: inline-block;line-height: 100rpx;margin-left: 20rpx;">我的订单</view>
		            <view style="width: 150rpx;height: 100%;float: right;line-height: 100rpx;">全部订单</view>
		        </block>
		    </view>
			<!-- 代收货 -->
			    <view style="height: 100rpx;width: 100%;border: bisque 1rpx solid;">
			        <block v-for="(item,index) in mytitlelist" :key="index">
			            <view style="width: 50px;height: 50px;margin-left: 20px;float: left;text-align: center;">
			                <image :src="item.imgs" style="width: 22.5px;height: 22.5px;margin-top: 5px;"></image>
			                <view style="font-size: 12.5px;">{{item.txts}}</view>
			            </view>
			        </block>
			    </view>
				<!-- 服务列表 -->
			<view>
			        <block v-for="(item,index) in myconlist" :key="index">
			            <view style="width: 100%;height: 100rpx;border-bottom: 1rpx solid rgb(233, 230, 230);line-height: 100rpx;">
			                <image :src="item.imgs" style="width: 25px;height: 25px;float: left;margin: 25rpx 20rpx;"></image>
			                <view style="font-size: 28rpx;">{{item.txts}}</view>
			            </view>
			        </block>
			        <view style="height:50px;width: 100%;line-height: 50px;">
			            <view style="float: left;text-indent:10px ;">关于我们</view>
			            <view style="float: right;margin-right: 15px;">></view>
			        </view>
			    </view>	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {},
				hasUserInfo: false,
				canIUse: uni.canIUse('button.open-type.getUserInfo'),
				canIUseGetUserProfile: false,
				canIUseOpenData: uni.canIUse('open-data.type.userAvatarUrl') && uni.canIUse(
					'open-data.type.userNickName'), // 如需尝试获取用户信息可改为false
				mytitlelist:[ {
                imgs:"../../static/images/order/待付款.png",txts:"待付款"
            }, {
                imgs:"../../static/images/order/fahuo.png",txts:"待发货"
            }, {
                imgs:"../../static/images/order/shouhuo.png",txts:"待收获"
            }, {
                imgs:"../../static/images/order/pingjia.png",txts:"待评价"
            }, {
                imgs:"../../static/images/order/wancheng.png",txts:"已完成"
            }],
			// 服务列表文案
			myconlist:[ {
                imgs:"../../static/images/my-info/myquan.png",txts:"我的优惠券"
            }, {
                imgs:"../../static/images/my-info/tuikuan.png",txts:"退款/售后"
            }, {
                imgs:"../../static/images/my-info/dizhi.png",txts:"收货地址"
            }, {
                imgs:"../../static/images/my-info/kefu.png",txts:"官方客服"
            }, {
                imgs:"../../static/images/my-info/shezhi.png",txts:"设置"
            },]
			}
		},
		onLoad() {
			if (uni.getUserProfile) {
				this.canIUseGetUserProfile = true
			}
		},
		methods: {
			getUserProfile(e) {
				console.log(e)
				uni.getUserProfile({
					desc: '展示用户信息',
					success: (res) => {
						console.log(res)
						this.userInfo = res.userInfo
						this.userInfo = true
					}
				})
			}
		}
	}
</script>

<style scoped>
	.userinfo {
		width: 100%;
		height: 300rpx;
		display: flex;
		margin-top: 0rpx;
		flex-direction: column;
		align-items: center;
		text-align: right;
		color: rgb(250, 247, 247);
		background-color: red;
	}

	.userinfo-avatar {
		overflow: hidden;
		width: 160rpx;
		height: 160rpx;
		margin-top: 60rpx;
		border-radius: 50%;
	}
	
</style>
